<<template>
<div class="edit-container">
<el-container>
  <el-main>
  <el-form :model="questionForm" :rules="rules" ref="questionForm" label-width="100px" class="demo-questionForm">
  <div>   
  <el-form-item label="题型" required  style="display: inline-block; width: 40%;" class="question-types select">
    <el-col :span="5" class="question">
      <el-form-item>
        <el-select v-model="questionForm.classify" placeholder="请选择题型" @change="classifyChange">
            <el-option label="单选题" value="1" check></el-option>
            <el-option label="多选题" value="2"></el-option>
            <el-option label="主观题" value="3"></el-option>
        </el-select>
      </el-form-item>
    </el-col>
  </el-form-item>
  <el-form-item label="标签"  style="display: inline-block; width: 40%; margin-left: -60px;" class="question-types">
    <el-col :span="5" class="tag">
      <el-form-item prop="">
        <el-input></el-input>
      </el-form-item>
    </el-col>
  </el-form-item>
  <div class="tagName">
    <span>高级
      <i class="el-icon-circle-close"></i>
    </span>  
    <span>中级
      <i class="el-icon-circle-close"></i>
    </span>
    <span>初级
      <i class="el-icon-circle-close"></i>
    </span>
  </div>
  </div>    
   <el-form-item label="题目" prop="question" required class="sub">
     <el-col :span="12">
       <el-input type="textarea" v-model="questionForm.question" resize="none"></el-input>
     </el-col>    
   </el-form-item>

  <el-form-item class="delmargin"
    v-if="domainsVisible"
    v-for="(domain, index) in questionForm.domains"
    :key="domain.key"
    :prop="'domains.' + index + '.value'"
    :rules="{
      required: true, trigger: 'blur', validator: validateDomains
    }"
  >
    <el-col :span="1">
      <el-radio v-model="questionForm.radio" :label="index" v-show="radioVisible"><span v-html="numberConvertLetterFun(index)"></span></el-radio>
      <el-checkbox v-model="domain.checked" :label="index" v-show="checkedVisible"><span v-html="numberConvertLetterFun(index)"></span></el-checkbox>
    </el-col>
    <el-col :span="11">
      <el-input v-model="domain.value"></el-input>
    </el-col>
    <el-col :span="1">
      <span class="el-icon-delete editdel"></span>
    </el-col>
  </el-form-item>
  <el-form-item v-show="domainsVisible">
    <el-button @click="addDomain">新增选项</el-button>    
  </el-form-item>

   <el-form-item label="试题解析" prop="remarks" class="sub">
     <el-col :span="12">
       <el-input type="textarea" v-model="questionForm.remarks" resize="none"></el-input>
     </el-col>    
   </el-form-item>

  <el-form-item style="width: 685px;" class="btncenter">
    <el-button type="primary" @click="submitForm('questionForm','0')" :loading="btnLoading">保存</el-button>
  </el-form-item>
</el-form>
</el-main>
</el-container>
</div>
</template>


<script>
  import { Message } from 'element-ui'
  import { fetchTree } from '@/api/profession'
  import { fetchAdd, fetchGet } from '@/api/question'
  import { isvalidateRequired } from '@/utils/validate'
  import { numberConvertLetter } from '@/utils/index'

  export default {
    data() {
      const validateTypeList = (rule, value, callback) => {
        if (value.length === 0) {
          callback(new Error('请选择类型'))
        } else {
          callback()
        }
      }
      const validateQuestion = (rule, value, callback) => {
        if (!isvalidateRequired(value)) {
          callback(new Error('请输入题干'))
        } else {
          callback()
        }
      }
      const validateRemarks = (rule, value, callback) => {
        if (!isvalidateRequired(value)) {
          callback(new Error('请输入备注'))
        } else {
          callback()
        }
      }
      const validateDomains = (rule, value, callback) => {
        if (!isvalidateRequired(value)) {
          callback(new Error('选项不能为空'))
        } else {
          callback()
        }
      }
      return {
        btnLoading: false,
        validateDomains: validateDomains,
        radioVisible: true,
        checkedVisible: false,
        domainsVisible: true,
        options: [],
        questionForm: {
          id: '',
          typeList: [],
          classify: '1',
          question: '',
          domains: [{
            value: '',
            checked: true
          },
          {
            value: '',
            checked: false
          },
          {
            value: '',
            checked: false
          },
          {
            value: '',
            checked: false
          }],
          radio: 0,
          remarks: ''
        },
        rules: {
          typeList: [
            { required: true, trigger: 'change', validator: validateTypeList }
          ],
          question: [
            { required: true, trigger: 'blur', validator: validateQuestion }
          ],
          remarks: [
            { required: true, trigger: 'blur', validator: validateRemarks }
          ]
        }
      }
    },
    created() {
      this.getTree()
      this.getParams()
    },
    methods: {
      submitForm(formName, type) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.btnLoading = true
            console.log(this.questionForm.typeList)
            fetchAdd(this.questionForm).then(response => {
              if (response.data.status === 200) {
                Message.success('保存题目成功')
              } else {
                Message.error('系统异常,保存题目失败')
              }
              if (type === '0') {
                this.goBack()
              } else {
                this.resetForm(formName)
              }
              this.btnLoading = false
            }).catch(_ => {
              Message.error('系统异常,保存题目失败!!')
              this.btnLoading = false
            })
          } else {
            return false
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
      removeDomain(item) {
        if (this.questionForm.domains.length === 2) {
          Message.warning('最少两个选项')
        } else {
          var index = this.questionForm.domains.indexOf(item)
          if (index !== -1) {
            this.questionForm.domains.splice(index, 1)
          }
        }
      },
      addDomain() {
        this.questionForm.domains.push({
          value: '',
          key: Date.now()
        })
      },
      getTree() {
        this.treeLoading = true
        this.$emit('create') // for test
        fetchTree(this.listQuery).then(response => {
          this.options = response.data.data
          this.treeLoading = false
        })
      },
      classifyChange(val) {
        switch (val) {
          case '1' :
            this.radioVisible = true
            this.checkedVisible = false
            this.domainsVisible = true
            break
          case '2' :
            this.radioVisible = false
            this.checkedVisible = true
            this.domainsVisible = true
            break
          case '3' :
            this.radioVisible = false
            this.checkedVisible = false
            this.domainsVisible = false
            break
        }
      },
      numberConvertLetterFun(number) {
        return numberConvertLetter(number)
      },
      getParams() {
        if (typeof (this.$route.params.id) !== 'undefined') {
          this.questionForm.id = this.$route.params.id
          fetchGet(this.$route.params.id).then(response => {
            if (response.data.status === 200) {
              this.classifyChange(response.data.data.classify)
              this.questionForm = response.data.data
            } else {
              Message.error('系统异常,获取修改信息失败')
            }
          }).catch(_ => {
            Message.error('系统异常,获取修改信息失败!!')
          })
        }
      },
      goBack() {
        this.$router.push({
          path: '/index',
          name: 'index'
        })
      }
      // preview(formName) {
      //   this.$refs[formName].validate((valid) => {
      //     if (valid) {
      //     } else {
      //       return false
      //     }
      //   })
      // }
    }
  }
</script>
<style scoped>
.edit-container .el-main{
  text-align: left;
  margin: 0 auto;
  padding: 0;
}
.el-form{
  width: 76%;
  margin: 0 auto;
}
.classfy{
  width: 100%;
}
.el-col-2 {
  padding-left: 6px;
}

.question,.tag {
  width: 80%;
}
.tagName {
  line-height: 24px;
  margin-top: -92px;
  text-align: right;
  width: 66%;
  font-size: 14px;
}
.sub {
  margin-left: 52px;
}
.sub>>>.el-form-item__label{
  width: 100%!important;
  text-align: left;
}
.sub>>>.el-form-item__content {
  margin-left: 0!important;
}
.delmargin>>>.el-form-item__content{
  margin-left: 56px!important;
}
.el-col-11 {
  margin-left: 10px;
}
.editdel {
  font-size: 22px;
  margin-left: 10px;
}
.btncenter{
  text-align: center;
  width: 60%!important;
}
</style>
<style>
 .question-types[data-v-25b59af6]>.el-form-item__label {
    width: 50px!important;
 }
  .question-types[data-v-25b59af6]>.el-form-item__content{
    margin-left: 10px!important;
  }
</style>

